import React, { useEffect } from 'react'
import { Button, Form, Input, Card,message } from 'antd';
import style from '../index.module.css'
import {addHospitalParamType,getHosSetFromIdRequestType} from '@api/hospital/model/hospitalSetTypes'
import {addHospitalRequest,getHosSetFromIdRequest,updateHosipitalRequest} from '@api/hospital/hospitalSet'
import { useNavigate, useParams } from 'react-router-dom';


export default function AddOrUpdateHosSet() {
  const navigate =useNavigate()
  //通过Form组件上的一个useForm方法,可以创建实例,然后在某一个Form组件上添加一个form属性,值为当前实例,那么Form表单和当前的form实例就关联起来了
  const [form] = Form.useForm()
  //获取点击修改按钮时传过来的id
  const {id}=useParams()
  console.log(id,'iiiiidddd')
  //获取id之后通过传id调用获取数据的axios请求函数
  useEffect(()=>{
    //因为组件复用，在新增医院的时候不需要刚进入就发送请求,所以我们要判断当前是否有id
      if(id){
        const getHosDetail = async()=>{
            const result =await getHosSetFromIdRequest(+id)
            //Form实例上有一个setFieldsValue方法,可以把一个对象的值通过key和表单的name一一对应的形式添加到表单里
            form.setFieldsValue(result) 
        }
        getHosDetail()
        
      }
  })




    //1.新增医院的事件回调函数
  const addHosFinishHandle = async(fieldValue:addHospitalParamType)=>{
    //如果点击时路由的地址上有id，则执行更新的请求
    if(id){
      await updateHosipitalRequest({...fieldValue,id})
    //做成功提示的
      message.success('修改医院数据成功');
      //成功后，跳转到设置页面
      navigate('/syt/hosipital/hosipitalSet')
    }else{
        //发送新增请求
        await addHospitalRequest(fieldValue)
        //做成功提示的
      message.success('新增医院数据成功');
        //成功后，跳转到设置页面
        navigate('/syt/hosipital/hosipitalSet')

    }
     
    
  }
  //2.点击返回的事件回调函数
  const goBackHandle = ()=>{
    navigate(-1)
 }


  

  return (
    <Card>
      <Form
        form={form}
        name="basic"
        labelCol={{ span: 3 }}
        wrapperCol={{ span: 18 }}
        onFinish={addHosFinishHandle}
      >
        <Form.Item
          label="医院名称"
          name="hosname"
          rules={[{
            required: true,
            message: '请输入医院名称',
            transform(value) {
              return value.trim()
            }
          }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          label="医院编号"
          name="hoscode"
          rules={[{
            required: true,
            message: '请输入医院编号',
            //将字段值转换成目标值后进行校验
            // transform(value) {
            //   return value.trim()
            // }
          }]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label="api基础路径"
          name="apiUrl"
          rules={[{
            required: true,
            message: '请输入api基础路径',
            // transform(value) {
            //   return value.trim()
            // }
          }]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label="联系人姓名"
          name="contactsName"
          rules={[{
            required: true,
            message: '请输入联系人姓名',
            // transform(value) {
            //   return value.trim()
            // }
          }]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label="联系人手机"
          name="contactsPhone"
          rules={[{
            required: true,
            message: '请输入联系人手机',
            // transform(value) {
            //   return value.trim()
            // }
          }]}
        >
          <Input />
        </Form.Item>

        <Form.Item
          wrapperCol={{ offset: 3 }}
        >
          <Button type="primary" htmlType="submit" className={style.mr}>
            提交
          </Button>
          <Button type="default" htmlType="button" onClick={goBackHandle}>
            返回
          </Button>
        </Form.Item>
      </Form>
    </Card>
  );
}

